<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<c:url value="/css/main.css" />"/>
<link rel="stylesheet" href="<c:url value="/css/style.css"/>" type="text/css"/>
<title>member</title>
</head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	function clearForm(){
			var inputs = document.getElementsByTagName("input");
			for(var i=0; i<inputs.length; i++) {
			if(inputs[i].type=="text") {
			inputs[i].value="";
			}
			}
	}
	
	var year,month;
	window.onload=function(){
		setyear();
		setmonth();
		document.getElementById("sely").onchange=setseld;
		document.getElementById("selm").onchange=setseld;
	}
	function setyear(){
	for(var i=1970;i<=1996;i++){
		var opt=document.createElement("option");
		opt.value=i;
		opt.innerHTML = (i);
		document.getElementById("sely").appendChild(opt);
	}
	}
	function setmonth(){
		for (var j=1;j<=12;j++){
			var opt=document.createElement("option");
			opt.value=j;
			opt.innerHTML = j;
			document.getElementById("selm").appendChild(opt);
		}
	}	
	function setseld(){
			var d=document.getElementById("seld");
			if(d.children.length>1){
				for(var i=(d.children.length)-1;i>=0;i--){
					 if(i==0)continue;
					 else
				  d.removeChild(d.childNodes[i]);
				}
			}
		year=document.getElementById("sely");
		month=document.getElementById("selm");
		var day=new Date(year.value,month.value,0);
		var dayM=day.getDate();
		var opDate;
		   var txtDate;
		for(var h=1;h<=dayM;h++){
			var opt=document.createElement("option");
					opt.value=h;
					opt.innerHTML = h;
					document.getElementById("seld").appendChild(opt);
		}
	}
	$(function() {
		$("#acc").blur(function() {
			$.ajax({
				type : 'POST',
				url : 'AccountCheck.controller',
				dataType : "text",
				data : {
					"account" : $("#acc").val()
				},
				success : function(response) {
					$('#test').text(response);
					
				},
				error : function(request, textStatus, error) {
					console.log("hi");
					alert(error);
				}
			})
		});
	});
	function shows(){
		$('#four').fadeIn();
	}
	</script>
<body>
<div class="header">
		<div>
		
		</div>
		<div class="featured">
			<img src="<c:url value="/images/ineend.jpg" />" id="leftpic">
			<div>
				<h3>您滿... <br>18了嗎...？</h3>
				<h5>您的行為、安全，本公司一概不負責。</h5>
				<input type="button" value="同意" onclick="shows();">
			</div>
		</div>
	</div>
<form action="<c:url value="/member.controller" />" id="four" method="get" style="display:none">
<table>
	<tr>
		<td>帳號 : </td>
		<td><input type="Email" name="account" id="acc" placeholder="請輸入E-mail" value="${param.account}"><span>此欄註冊後不得修改</span></td>
		<td id="test">${errors.account}</td>
	</tr>
	<tr>
		<td>密碼 : </td>
		<td><input type="password" name="pwd" value="${param.pwd}"></td>
		<td>${errors.pwd}</td>
	</tr>

	<tr>
		<td>真實姓名 : </td>
		<td><input type="text" name="name" value="${param.name}"></td>
		<td>${errors.name}</td>
	</tr>
	<tr>
		<td>顯示暱稱 : </td>
		<td><input type="text" name="nickname" value="${param.nickname}"></td>
		<td>${errors.nickname}</td>
	</tr>	
	<tr>
		<td>性別 :</td>
		<td><input type="radio" name="sex" value="m">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="radio" name="sex" value="f">女<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此欄註冊後不得修改</span></td>
		<td>${errors.sex}</td>
	</tr>	
    <tr>
		<td>生日 : </td>
		<td><select id="sely" name="yy">
		<option value="">下拉選擇</option></select><span>年</span>
		     <select id="selm" name="mm">
		<option value="">下拉選擇</option></select><span>月</span>
		     <select id="seld" name="dd">
		<option value="">下拉選擇</option></select><span>日</span>
		<span>此欄註冊後不得修改</span></td>
		<td>${errors.bdate}</td>
	</tr>	
	<tr>
		<td>身高 : </td>
		<td><input type="number" name="hight"  id="comback" value="${param.hight}"></td>
		<td>${errors.hight}</td>
	</tr>	
	<tr>
		<td>居住地 : </td>
		<td><select name="region">
		<option value="基隆">基隆</option>
		<option value="台北">台北</option>
		<option value="桃園">桃園</option>
		<option value="新竹">新竹</option>
		<option value="苗粟">苗粟</option>
		<option value="台中">台中</option>
		<option value="南投">南投</option>
		<option value="嘉義">嘉義</option>
		<option value="台南">台南</option>
		<option value="高雄">高雄</option>
		<option value="屏東">屏東</option>
		<option value="宜蘭">宜蘭</option>
		<option value="花蓮">花蓮</option>
		<option value="台東">台東</option>
		<option value="外島">外島地區</option>
		</select></td>
		<td>${errors.region}</td>
	</tr>	
	<tr>
		<td>血型 :</td>
		<td><input type="radio" name="blood" value="A">A
		<input type="radio" name="blood" value="B">B
		<input type="radio" name="blood" value="O">O
		<input type="radio" name="blood" value="C">AB<span>&nbsp;此欄註冊後不得修改</span></td>
		<td>${errors.blood}</td>
	</tr>	
     <tr>
		<td>感情狀態 : </td>
		<td><select name="state">
		<option value="單身">單身</option>
		<option value="已婚">已婚</option>
		<option value="喪偶">喪偶</option>
		<option value="一言難盡">一言難盡</option>
		</select></td>
		<td>${errors.state}</td>
	</tr>	
	<tr>
		<td>抽菸 : </td>
		<td><input type="radio" name="play" value="false">不抽
		<input type="radio" name="play" value="true">抽</td>
		<td>${errors.play}</td>
	</tr>	
	<tr>
		<td>興趣 : </td>
		<td><input type="checkbox" name="ball" value="true">球類
		<input type="checkbox" name="run" value="true">跑步
		<input type="checkbox" name="reading" value="true">閱讀
		<input type="checkbox" name="swim" value="true">游泳
		<input type="checkbox" name="movie" value="true">電影
		<input type="checkbox" name="singing" value="true">唱歌
		<input type="checkbox" name="bike" value="true">單車
		<input type="checkbox" name="tvgame" value="true">電玩</td>
		<td></td>
	</tr>	
	<tr>
		<td>
			<input type="submit" name="inp" value="next">
		</td>
		<td>
			<input type="button" value="Clear" onclick="clearForm()">
		</td>
	</tr>
</table>

</form>
<c:if test="${not empty errors}">
	<script>
		$('#four').fadeIn();
		$('#comback').focus();
	</script>
</c:if>
</body>
</html>